<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cookie</title>
    <style>
        button{
            border:0;
            border-radius:3px;
            color:#fff;
            background: #4abfff;
            padding:6px 12px;
            cursor:pointer;
        }
        button:hover{
            background: #61cfff;
        }
        button:focus {
            outline:0;
        }
        #contxt{

            padding-top:10px;
            border-bottom:1px solid #ddd;
        }
    </style>
</head>
<body>
<p>cookie是服务器传给客户端并保存在客户端的一段信息，这个 Cookie是有大小，数量限制的！！</p>
<button id="btn">getCookie</button>
<p id="contxt"></p>
</body>
<script>
    function setCookie(name,value,iDay){
        var oDate = new Date();
        oDate.setDate(oDate.getDate()+iDay)
        document.cookie = name+'='+value+';expires='+oDate;
    }

    function getCookie(name){
        var arr = document.cookie.split('; ')
        for(var i =0;i<arr.length;i++){
            var temp = arr[i].split('=')
            if(temp[0] == name){
                return temp[1]
            }
        }
        return ''
    }

   function removeCookie(name){
        setCookie(name,1,-1)
   }







    var contxt = document.getElementById("contxt")
    var btn = document.getElementById("btn")
    btn.onclick = function(){
        contxt.innerHTML = document.cookie
    }

  setCookie('userName','王昭君',1)
  setCookie('userName','王昭君2',1)
   // removeCookie('name')


    console.log(getCookie('userName'))
    console.log(getCookie('username'))
    console.log(getCookie('user'))
    console.log(getCookie('id'))


</script>
</html>